<template>
	<view class="container bg-white">		
		<view class="exam_state m-t30 m-b30 p-t30 p-b30">
			<view class="iconfont fs72 text-blue icon-daishenhe" v-if="info.state == 0"></view>
			<view class="iconfont fs72 text-blue icon-shenhetongguo" v-else-if="info.state == 1 || info.state == 3"></view>
			<view class="iconfont fs72 text-blue icon-shenhebutongguo" v-else-if="info.state == 2 || info.state == 4"></view>
			<view class="text-blue m-t10 m-b30"> {{stateList[info.state]}}</view>	
			<view class="m-t10 m-b30" v-if="info.state == 2">
				拒绝原因： {{info.refuse_remark || ""}}
			</view>
			<view class="m-t30 p-t30 uni-flex justify-center">
				<view class="uni-flex justify-space-between">
					<view class="btn w-80 m-l30" @click="cancel" v-if="info.state == 0">取消申请</view>
					<view class="btn w-80 m-l30" @click="reapply" v-if="info.state == 2 || info.state == 4">重新申请</view>
				</view>
			</view>
		</view>		
		<!-- 发放 -->
		<view class="info_row" v-if="info.state && info.state == 3">
			<view class="info_row_label">发放图片</view> 
			<view class="info_row_value">
				<view class="imgs_item" v-for="(img,ikey) in info.images">
					<image class="w-100 m-b10 bg-grayf5" :src="img" mode="aspectFill" v-if="img" @click="viewImage(info.images,ikey)"></image>
				</view>
			</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">申请图片</view>
			<view class="info_row_value imgs">
				<view class="imgs_item" v-for="(img,ikey) in info.applyImages">
					<image class="w-100 m-b10 bg-grayf5" :src="img" mode="aspectFill" v-if="img" @click="viewImage(info.applyImages,ikey)"></image>
				</view>
			</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">发票类型</view> <view class="info_row_value">{{invoiceItems[info.invoice_type]}}</view>
		</view>
		<view class="info_row" v-if="info.invoice_type == 1">
			<view class="info_row_label">抬头类型</view> <view class="info_row_value">{{headerItems[info.header_type]}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">发票抬头</view> <view class="info_row_value">{{info.header}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">开票金额</view> <view class="info_row_value">{{info.money}}元</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">开票类型</view> <view class="info_row_value">{{info.money_type_name}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">开票内容</view> <view class="info_row_value">{{info.title}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">项目名称</view> <view class="info_row_value">{{info.service_name}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">项目地址</view> <view class="info_row_value">{{info.service_address}}</view>
		</view>
		<view class="info_row" v-if="info.header_type == 1">
			<view class="info_row_label">身份证号</view> <view class="info_row_value">{{info.card_no}}</view>
		</view>
		<template v-if="info.header_type == 2">
			<view class="info_row">
				<view class="info_row_label">单位税号</view> <view class="info_row_value">{{info.no}}</view>
			</view>
			<view class="info_row">
				<view class="info_row_label">电话</view> <view class="info_row_value">{{info.phone}}</view>
			</view>
			<view class="info_row">
				<view class="info_row_label">注册地址</view> <view class="info_row_value">{{info.address}}</view>
			</view>
			<view class="info_row">
				<view class="info_row_label">银行支行</view> <view class="info_row_value">{{info.bank_address}}</view>
			</view>
			<view class="info_row">
				<view class="info_row_label">银行卡号</view> <view class="info_row_value">{{info.bank_no}}</view>
			</view>
		</template>
		<view class="info_row">
			<view class="info_row_label">邮箱地址</view> <view class="info_row_value">{{info.mail_email}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">收货人名称</view> <view class="info_row_value">{{info.mail_name}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">收货人电话</view> <view class="info_row_value">{{info.mail_phone}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">收货人地址</view> <view class="info_row_value">{{info.mail_address}}</view>
		</view>
		<view class="info_row">
			<view class="info_row_label">填单人</view> <view class="info_row_value">{{info.fill_name}}</view>
		</view>
	</view>
</template>

<script>
import { invoiceInfo, invoiceApply, invoiceCancel } from '@/api/invoice.js';
export default {
	data() {
		return {
			stateList: ["审核中","审核通过","审核拒绝","已发送","已取消"],		//申请状态
			info: {},		//申请信息
			invoiceItems: ['','普通发票', '增值税专用发票'],
			headerItems: ['','个人', '企业'],
		}
	},
	onLoad(e) {
		this.info = e.content ? JSON.parse(e.content) : {};
	},
	methods: {
		/**
		 * 取消
		 */
		cancel(){
			let that = this
			invoiceCancel({id: that.info.id}).then((res) => {
				if(res.code == 0) {
					uni.showToast({ title: "取消成功", icon: 'none' })
					that.getInfo();
				}else {
					uni.showToast({ title: res.msg, icon: 'none' })					
				}
			})
		},
		/**
		 * 重新申请
		 */
		reapply(){
			uni.navigateTo({
				url: `/pages/apply/invoice?Sub_dh=${this.info.sub_dh}&content=${JSON.stringify(this.info)}`
			})
		},	
		/**
		 * 查看大图
		 */
		viewImage(imgs,index){
			uni.previewImage({
				current: index,
				urls: imgs
			})
		},
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	padding: 30rpx 50rpx;
}
.exam_state {
	text-align: center;
}
.info_row {
    position: relative;
    display: flex;
    flex-direction: row;
	font-size: 28rpx;
	line-height: 72rpx;
	margin-bottom: 20rpx;
}
.info_row_label {
	color: #606266;
	width: 210rpx;
	padding-right: 24rpx;
}
.info_row_value {
	position: relative;
	flex: 1;
	box-sizing: border-box;
	flex-direction: row;
}
</style>